import React, { useState, useEffect } from "react";
import { Row, Col, Input, Button, message, Tag } from "antd";
import Article from "../../api/article/index";
import ReactWordcloud from "react-wordcloud";

const ArticleTypes = () => {
  const [types, setTypes] = useState();
  const [icon, setIcon] = useState();
  const [orderNum, setOrderNum] = useState();
  const [typesList, setTypesList] = useState([]);
  const [color, setColor] = useState("#f6460a");
  useEffect(() => {
    getTypes();
    getWords();
  }, []);

  const [words, setWords] = useState([]);
  // 获取标签云
  const getWords = () => {
    Article.words().then(res => {
      if (res.code === 200) {
        setWords(res.data);
      }
    });
  };
  //   添加分类方法
  const addTypes = () => {
    let formData = {
      type_name: types,
      icon: icon,
      order_num: orderNum,
      color: color
    };
    Article.addTypes(formData).then(res => {
      if (res.code === 200) {
        message.success("添加分类成功");
        getTypes();
      } else {
        message.error(res.data);
      }
    });
  };
  //   获取分类方法
  const getTypes = () => {
    Article.getTypes().then(res => {
      if (res.code === 200) {
        setTypesList(res.data);
      }
    });
  };
  return (
    <div className="types white-bg">
      <Row gutter={5} type="flex" align="bottom">
        <Col xs={24} sm={24} md={6} lg={6} xl={6} className="margin_top_10">
          <div>分类名:</div>
          <Input
            placeholder="输入分类名"
            value={types}
            allowClear={true}
            onChange={e => {
              setTypes(e.target.value);
            }}
          />
        </Col>
        <Col xs={24} sm={24} md={6} lg={6} xl={6} className="margin_top_10">
          <div>图标:</div>
          <Input
            placeholder="输入图标名"
            value={icon}
            allowClear={true}
            onChange={e => {
              setIcon(e.target.value);
            }}
          />
        </Col>
        <Col xs={24} sm={24} md={6} lg={6} xl={6} className="margin_top_10">
          <div>排名:</div>
          <Input
            placeholder="输入排名顺序"
            value={orderNum}
            allowClear={true}
            onChange={e => {
              setOrderNum(e.target.value);
            }}
          />
        </Col>
        <Col xs={24} sm={24} md={6} lg={6} xl={6} className="margin_top_10">
          <div>颜色;</div>
          <Input
            type="color"
            defaultValue={color}
            onChange={e => {
              setColor(e.target.value);
            }}
          />
        </Col>
      </Row>
      <Row type="flex" justify="center">
        <Col style={{ marginTop: "10px" }}>
          <Button type="primary" shape="round" onClick={addTypes}>
            添加
          </Button>
        </Col>
      </Row>
      <Row style={{ marginTop: "10px" }}>
        <Col>
          {typesList.map((item, index) => {
            return (
              <Tag style={{ marginTop: "10px" }} key={index} color={item.color}>
                {item.type_name}
              </Tag>
            );
          })}
        </Col>
      </Row>
      <Row>
        <ReactWordcloud words={words} />
      </Row>
    </div>
  );
};
export default ArticleTypes;
